﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="author" content="陈旭光，Chen XuG,chenxvguang1991@163.com">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
	<title>Chen XuG's demos</title>
	<link rel="shortcut icon" href="img/title.ico"/>
	<link rel="stylesheet" type="text/css" href="style/reset.css">
	<link rel="stylesheet" type="text/css" href="style/demos.css">
</head>
<body>
  <div id='nav'>
    <div id='head'>
        <span>Demos</span>
        <address>制作 by <a href="http://chenxug.oschina.io/resume/"  target="_blank" style="text-decoration: underline">Chen XuG(查看简历)</a></address>
    </div>
    <div id='innerNav'>
            <a class="nav"><div><img src="img/flappyBird.png"  class="thumbnail" alt='flappyBird'></div><span>Flappy Bird</span></a>
            <a class="nav"><div><img src="img/2048.png"  class="thumbnail" alt='2048'></div><span>2048</span></a>
            <a class="nav"><div><img src="img/bootsharp.PNG" class="thumbnail" alt='基于Bootstrap的网站'></div><span>响应式网站</span></a>
            <a class="nav"><div><img src="img/仿写DOTA2首页.PNG" class="thumbnail" alt='仿写DOTA2首页'></div><span>DOTA2首页</span></a>
            <a class="nav"><div><img src="img/爱心鱼.png" class="thumbnail" alt='爱心鱼'></div><span>Lovely Fish</span></a>
    </div>
  </div>
  <iframe id='ifra' src="http://chenxug.oschina.io/flappy-bird-/"></iframe>
  <a href='http://chenxug.oschina.io/flappy-bird-/' target="_blank" id='newPage'>若游戏或网页卡顿请点击这里在新标签中打开</a>
  <a href="http://git.oschina.net/ChenXuG/Flappy-Bird-" target="_blank" id='downCode'>下载源码</a>
</body>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript">
  window.onload=window.onresize=function(){
      $('#head address').hover(function(){$('#contact').css('display','block')},function(){$('#contact').css('display','none')})
      //设置iframe大小
       var dw=$(document).width();
       var nw=$('#nav').width();
       $('iframe').width(dw-nw);
       $('iframe').height($('#nav').height());
      //点击改变iframe链接
      var iframeLink=[];
      var downLink=[];
      iframeLink.push("http://chenxug.oschina.io/flappy-bird-/");
      iframeLink.push('http://chenxug.oschina.io/game2048/');
      iframeLink.push('http://chenxug.oschina.io/honda/');
      iframeLink.push('http://chenxug.oschina.io/dota2/');
      iframeLink.push('http://chenxug.oschina.io/lovely-fish/');
      downLink.push("http://git.oschina.net/ChenXuG/Flappy-Bird-");
      downLink.push('http://git.oschina.net/ChenXuG/game2048');
      downLink.push('http://git.oschina.net/ChenXuG/honda');
      downLink.push('http://git.oschina.net/ChenXuG/DOTA2');
      downLink.push('http://git.oschina.net/ChenXuG/lovely-fish');
      
      $('.nav').each(function(){
        var _this=$(this);
        var  i=_this.index();
        _this.click(function(){
          $('#ifra').attr('src',iframeLink[i]);
          $('#newPage').attr('href',iframeLink[i]);
          $('#downCode').attr('href',downLink[i]);
          $('.nav').each(function(){
            $(this).removeClass('target');
          })
          _this.addClass('target');
        })
      });


      
     }

</script>
</html>